<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>2025 GSK趣享福莱克斯</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <link rel="stylesheet" href="https://wechat.horeax.net/2025/gsk_h5/public/css/reset.css" />
    <link rel="stylesheet" href="https://wechat.horeax.net/2025/gsk_h5/public/css/index.css?v=2" />
    <link href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css" type="text/css" rel="stylesheet" media="all" />
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>
      var loading

      wx.config({
        debug: false,
        appId: 'wxf7142a8c1ae59886',
        timestamp: 1757311192,
        nonceStr: 'Jc3Z1HDn4HQVqiJX',
        signature: '8f37d86802c1aea42f38c93634af3e07a85dac30',
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'previewImage', 'hideMenuItems']
      })

      wx.ready(function () {
        var shareData = {
          title: '2025 GSK趣享福莱克斯',
          desc: '快来解锁任务赢好礼吧！',
          link: 'https://wechat.horeax.net/2025/gsk_h5/',
          imgUrl: 'https://wechat.horeax.net/2025/gsk_h5/public/images/share.png',
          trigger: function (res) {},
          success: function (res) {
            //通知后台
            $.ajax({
              url: 'https://wechat.horeax.net/2025/gsk_h5/index.php?c=welcome&m=share_submit',
              dataType: 'json',
              success: function (response) {
                if (response.status) {
                  weui.toast(response.message)
                }
              }
            })
          },
          cancel: function (res) {},
          fail: function (res) {
            alert(JSON.stringify(res))
          }
        }

        wx.onMenuShareAppMessage(shareData)
        wx.onMenuShareTimeline(shareData)
        wx.onMenuShareQQ(shareData)
        wx.onMenuShareWeibo(shareData)

        wx.hideMenuItems({
          menuList: [
            'menuItem:editTag',
            'menuItem:delete',
            'menuItem:copyUrl',
            'menuItem:originPage',
            'menuItem:readMode',
            'menuItem:openWithQQBrowser',
            'menuItem:openWithSafari',
            'menuItem:share:email',
            'menuItem:share:brand'
          ]
        })

        // 初始化BGM - 确保微信JSSDK已经准备就绪
        const bgms = new BGMAutoPlayMgr('https://wechat-beijing-cdn.horeax.net/temp/music/5ff6bd57eebc0_01.mp3')
        // 将bgms设置为全局变量，供toggleBGM函数使用
        window.bgms = bgms
      })
    </script>
  </head>
  <body>
    <div class="wrapper">
      <!--首页-->
      <div class="page" id="page1">
        <div class="page1-inner">
          <div class="logo">
            <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/logo.png" />
          </div>
          <!---slogon-->
          <div class="page1-slogon page1-animate">
            <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/slogon.png" />
          </div>
          <!---con-->
          <div class="page1-con">
            <div class="page1-img1 page1-animate" onclick="goto_part1();">
              <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/page1-img1.png" />
            </div>
            <div class="page1-img2 page1-animate" onclick="goto_part2();">
              <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/page1-img2.png" />
            </div>
            <div class="page1-img3 page1-animate">
              <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/page1-img3.png" />
            </div>
          </div>
          <!--ft-->
          <div class="page1-ft">
            <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/ft.png" />
            <div class="ft-btn">
              <!-- 活动规则 -->
              <div class="btn-item" onclick="show_rule();">
                <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/btn-rule.png" />
              </div>
              <div class="btn-item" onclick="goto_rank();">
                <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/btn-rank.png" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--直播打卡-->
      <div class="page" id="page2" style="display: none">
        <div class="page2-inner">
          <!---title-->
          <div class="page2-img1 page2-animate">
            <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/page2-img1.png" />
          </div>
          <!---con-->
          <div class="page2-img2 page2-animate">
            <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/page2-img2.png" />
            <div class="page2-show"></div>
          </div>

          <!--返回-->
          <div class="btn-return" onclick="part1_goto_page1();">
            <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/btn-return.png" />
          </div>
        </div>
      </div>

      <!--漫画列表-->
      <div class="page" id="page3" style="display: none">
        <div class="page3-inner">
          <!--title-->
          <div class="page3-title page3-animate">
            <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/page3-title.png" />
          </div>
          <!--con-->
          <div class="page3-con"></div>
          <!--返回-->
          <div class="btn-return" onclick="part2_goto_page1();">
            <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/btn-return.png" />
          </div>
        </div>
      </div>

      <!--漫画游戏页-->
      <div class="page" id="page4" style="display: none">
        <div class="page4-inner">
          <!--title-->
          <div class="page4-img1" onclick="show_img();">
            <img id="page4-img1" />
          </div>
          <!--con-->
          <div class="page4-con">
            <div class="con-part">
              小橙子养宠物后，真切感受到“甜蜜的负担”。日常开支悄悄增加，还好她早早备好了
              <span class="p-txt">&nbsp;</span>
              ——定点医院报销70%，非定点报40%，线上问诊随时解忧，连毛孩子的
              <span class="p-txt">&nbsp;</span>
              都贴心包含，让她安心不少。
            </div>
            <div class="con-part">
              最让她牵挂的是出门时家里只吃湿粮的猫咪。幸好今年用福利积分兑换了
              <span class="p-txt">&nbsp;</span>
              ，服务人员实名认证，全程可直播或回看，就连
              <span class="p-txt">&nbsp;</span>
              也安排得稳稳哒。真是社恐猫咪和操心主人的双重福音！
            </div>
          </div>
          <!--select-->
          <div class="card-select">
            <div class="select-item">在线问诊</div>
            <div class="select-item">门诊挂号协助服务</div>
            <div class="select-item">重疾二次诊疗服务</div>
            <div class="select-item">100%报销医疗险</div>
            <div class="select-item">20万重疾赔付</div>
            <div class="select-item">工会临时性困难帮扶</div>
            <div class="select-item">其他重疾保障</div>
          </div>
          <!--btn-->
          <div class="btn-container">
            <div class="btn-tj btn-delete" onclick="delete_answer();">
              <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/btn-sc.png" />
            </div>
            <div class="btn-tj" id="no-submit" onclick="weui.alert('请完成所有填空再提交');">
              <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/btn-tj1.png" />
            </div>
            <div class="btn-tj" id="yes-submit" style="display: none" onclick="submit_answer();">
              <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/btn-tj2.png" />
            </div>
          </div>
          <!--返回-->
          <div class="btn-return" onclick="page4_goto_page3();">
            <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/btn-return.png" />
          </div>
          <div class="page4-tip">*漫画内容仅供参考，具体福利以全面薪酬平台展示及福利手册为准。</div>
        </div>
      </div>

      <!--排行榜-->
      <div class="page" id="page5" style="display: none">
        <div class="page5-inner">
          <!--title-->
          <div class="page5-title">
            <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/page5-title.png" />
          </div>
          <!--step-->
          <div class="page5-step">
            <div class="step-left">
              <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/page5-per.png" />
            </div>
            <div class="step-mid">
              <div class="mid-bar">
                <div class="bar-per" style="width: 30%"></div>
              </div>
            </div>
            <div class="step-right">30/100分</div>
          </div>
          <!--table-->
          <div class="page5-table">
            <div class="table-hd">
              <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/page5-table.png" />
            </div>
            <div class="table-bd">
              <div class="bd-row">
                <div class="row-num">
                  <div class="icon-num num1"></div>
                </div>
                <div class="row-name">某莫某</div>
                <div class="row-score">120分</div>
              </div>
              <div class="bd-row">
                <div class="row-num">
                  <div class="icon-num num2"></div>
                </div>
                <div class="row-name">某莫某</div>
                <div class="row-score">120分</div>
              </div>
              <div class="bd-row">
                <div class="row-num">
                  <div class="icon-num num3"></div>
                </div>
                <div class="row-name">某莫某</div>
                <div class="row-score">120分</div>
              </div>
              <div class="bd-row">
                <div class="row-num">
                  <div class="icon-num">4</div>
                </div>
                <div class="row-name">某莫某</div>
                <div class="row-score">120分</div>
              </div>
              <div class="bd-row">
                <div class="row-num">
                  <div class="icon-num">5</div>
                </div>
                <div class="row-name">某莫某</div>
                <div class="row-score">120分</div>
              </div>
              <div class="bd-row">
                <div class="row-num">
                  <div class="icon-num">5</div>
                </div>
                <div class="row-name">某莫某</div>
                <div class="row-score">120分</div>
              </div>
              <div class="bd-row">
                <div class="row-num">
                  <div class="icon-num">5</div>
                </div>
                <div class="row-name">某莫某</div>
                <div class="row-score">120分</div>
              </div>
              <div class="bd-row">
                <div class="row-num">
                  <div class="icon-num">5</div>
                </div>
                <div class="row-name">某莫某</div>
                <div class="row-score">120分</div>
              </div>
              <div class="bd-row">
                <div class="row-num">
                  <div class="icon-num">5</div>
                </div>
                <div class="row-name">某莫某</div>
                <div class="row-score">120分</div>
              </div>
              <div class="bd-row">
                <div class="row-num">
                  <div class="icon-num">5</div>
                </div>
                <div class="row-name">某莫某</div>
                <div class="row-score">120分</div>
              </div>
              <div class="bd-row">
                <div class="row-num">
                  <div class="icon-num">5</div>
                </div>
                <div class="row-name">1某莫某</div>
                <div class="row-score">120分</div>
              </div>
              <div class="bd-row">
                <div class="row-num">
                  <div class="icon-num">5</div>
                </div>
                <div class="row-name">2某莫某</div>
                <div class="row-score">120分</div>
              </div>
            </div>
          </div>
          <!--tip-->
          <div class="page5-tip">注：活动根据总积分排名(共计120分)，总积分相同以任务完成先后排名。</div>
          <!--返回-->
          <div class="btn-return" onclick="rank_goto_page1();">
            <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/btn-return.png" />
          </div>
        </div>
      </div>
    </div>
    <!--弹出层：报名-->
    <div class="popbox" id="pop1" style="display: none">
      <div class="maskbox">
        <div class="pop-form">
          <div class="form-title">
            <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/pop-img1.png" />
          </div>
          <div class="form-con">
            <div class="form-row">
              <div class="inputbox">
                <input type="text" id="login_mudid" placeholder="请输入您的MUDID" />
              </div>
            </div>
            <div class="form-row">
              <div class="inputbox">
                <input type="text" id="login_nickname" placeholder="来给自己取个好听的昵称吧！" />
              </div>
            </div>
          </div>
          <!--btn-->
          <div class="btn-submit" onclick="submit_login();">
            <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/btn-submit.png" />
          </div>
        </div>
      </div>
    </div>
    <!--弹出层：活动规则-->
    <div class="popbox" id="pop2" style="display: none">
      <div class="maskbox">
        <div class="pop-rule">
          <div class="rule-title">
            <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/pop-img2.png" />
          </div>
          <div class="rule-con">
            <ul>
              <li>1. 看直播，输口令，每个口令得10积分。</li>
              <li>2. 读漫画选词填空，每篇答对得10积分。</li>
              <li>3. 提交弹福选择，得20积分（数据获取会有延后，敬请谅解）。</li>
              <li>4. 9月8日-19日转发朋友圈，得10积分。</li>
              <li>5. 总积分相同按照完成时间先后顺序排名。</li>
              <li>6. 完成任务后扫码填信息，如您获奖，我们将按此信息发放。每人最多1次获奖机会，未填写视作放弃。</li>
            </ul>
            <div class="btn-know" onclick="hide_pop2();">
              <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/btn-know.png" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--弹出层：漫画填空正确-->
    <div class="popbox" id="pop-true" style="display: none">
      <div class="maskbox" style="background: none">
        <div class="pop-tip">
          <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/pop-true.png" />

          <!--关闭-->
          <div class="pop-close3" onclick="true_back();"></div>
        </div>
      </div>
    </div>
    <!--弹出层：漫画填空错误-->
    <div class="popbox" id="pop-false" style="display: none">
      <div class="maskbox" style="background: none">
        <div class="pop-tip">
          <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/pop-false.png" />

          <!--关闭-->
          <div class="pop-close3" onclick="resetGameState();"></div>
        </div>
      </div>
    </div>

    <!--弹出层：完成了所有项目-->
    <div class="popbox" id="pop3" style="display: none">
      <div class="maskbox">
        <div class="pop-tip">
          <div class="tip-title">
            <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/pop-img3.png" />
          </div>
          <div class="tip-con">
            <div class="con-txt">请扫描二维码正确填写信息，如您获得惊喜奖品，我们将按照此信息进行发放。每人最多只有一次获奖机会，如未填写，视为放弃。</div>
            <div class="img-code">
              <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/img-code.png" />
            </div>
          </div>

          <!--关闭-->
          <div class="pop-close2" onclick="hide_pop3();"></div>
        </div>
      </div>
    </div>

    <!-- 背景音乐 开始 -->
    <div class="musicbox" onclick="toggleBGM();">
      <div id="sound_image" class="music-inner openmusic"></div>
    </div>
    <!-- 背景音乐 结束 -->
    <script src="https://wechat.horeax.net/2025/gsk_h5/public/js/jquery-2.1.4.min.js"></script>
    <script>
      //是否报名变量
      var is_signup = false

      // 活动规则-显示
      function show_rule() {
        $('#pop2').show()
        setTimeout(function () {
          $('#pop2 .pop-rule').addClass('show')
        }, 50)
      }

      //活动规则-关闭
      function hide_pop2() {
        $('#pop2 .pop-rule').removeClass('show').addClass('hide')
        setTimeout(function () {
          $('#pop2').hide()
          $('#pop2 .pop-rule').removeClass('hide')
        }, 300)
      }

      //跳转到直播打卡
      function goto_part1() {
        //报名判断
        if (!is_signup) {
          show_login_pop()
          return
        }

        // 从后端获取 live_list 数据
        $.ajax({
          url: 'https://wechat.horeax.net/2025/gsk_h5/index.php?c=welcome&m=get_live_list',
          type: 'POST',
          dataType: 'json',
          beforeSend: function (XMLHttpRequest) {
            loading = weui.loading('加载中')
          },
          success: function (response) {
            if (response.status) {
              // 根据数据动态生成 live 列表
              generateLiveList(response.result)

              clearPage1Animation()
              $('#page1').hide()
              $('#page2').show()
            } else {
              weui.alert('获取直播列表失败，请稍后再试')
            }
          },
          error: function () {
            weui.alert('网络错误，请刷新页面重试')
          },
          complete: function (XMLHttpRequest, textStatus) {
            loading.hide()
          },
          async: true
        })
      }

      // 根据 live 数据动态生成列表
      function generateLiveList(liveData) {
        var html = ''

        for (var i = 0; i < liveData.length; i++) {
          var live = liveData[i]

          html += '<div class="show-group" data-live-id="' + live.id + '">'
          html += '    <div class="group-hd">'
          html += '        <div class="hd-name">' + live.name + ' </div>'
          html += '    </div>'
          html += '    <div class="group-bd">'

          // 根据状态显示不同内容
          if (live.is_completed) {
            // 已完成
            html += '        <div class="bd-over">已完成</div>'
          } else if (!live.is_open) {
            // 未到开放时间
            html += '        <div class="bd-tip">看直播，得口令</div>'
          } else {
            // 到开放时间但未完成，显示输入框
            html += '        <div class="bd-form">'
            html += '            <div class="form-input">'
            html += '                <input type="text" placeholder="请输入直播口令" data-live-id="' + live.id + '"/>'
            html += '            </div>'
            html += '            <div class="btn-tijiao" onclick="submitLiveCode(' + live.id + ')">提交</div>'
            html += '        </div>'
          }

          html += '    </div>'
          html += '</div>'
        }

        // 更新页面内容
        $('.page2-show').html(html)
      }

      // 提交直播口令
      function submitLiveCode(liveId) {
        var code = $('input[data-live-id="' + liveId + '"]')
          .val()
          .trim()

        if (!code) {
          weui.topTips('请输入直播口令')
          return
        }

        // 禁用提交按钮，防止重复提交
        var $btn = $('div[onclick="submitLiveCode(' + liveId + ')"]')
        var originalText = $btn.text()
        $btn.text('提交中...').css('pointer-events', 'none')

        $.ajax({
          url: 'https://wechat.horeax.net/2025/gsk_h5/index.php?c=welcome&m=submit_live_code',
          type: 'POST',
          beforeSend: function (XMLHttpRequest) {
            loading = weui.loading('加载中')
          },
          data: {
            live_id: liveId,
            code: code
          },
          dataType: 'json',
          success: function (response) {
            if (response.status) {
              weui.toast(response.message, { duration: 1000 })
              // 提交成功后，更新该项的显示状态为已完成
              var $group = $('div[data-live-id="' + liveId + '"]')
              $group.find('.group-bd').html('<div class="bd-over">已完成</div>')
            } else {
              weui.alert(response.message)
            }
          },
          error: function () {
            weui.alert('网络错误，请稍后再试')
          },
          complete: function (XMLHttpRequest, textStatus) {
            loading.hide()
            // 恢复按钮状态
            $btn.text(originalText).css('pointer-events', 'auto')
          }
        })
      }

      //直播打卡返回首页
      function part1_goto_page1() {
        clearPage2Animation()
        $('#page2').hide()
        $('#page1').show()
        check_is_finished()
      }

      //漫画详情返回漫画列表
      function page4_goto_page3() {
        $('#page4').hide()
        $('#page3').show()
      }

      //报名弹层-显示
      function show_login_pop() {
        $('#pop1').show()
        setTimeout(function () {
          $('#pop1 .pop-form').addClass('show')
        }, 50)
      }

      //报名弹层-关闭
      function hide_login_pop() {
        $('#pop1 .pop-form').removeClass('show').addClass('hide')
        setTimeout(function () {
          $('#pop1').hide()
          $('#pop1 .pop-form').removeClass('hide')
        }, 300)
      }

      //提交报名数据
      function submit_login() {
        var mudid = $('#login_mudid').val().trim()
        if (!mudid) {
          weui.topTips('请输入您的MUDID')
          return
        }

        var nickname = $('#login_nickname').val().trim()
        if (!nickname) {
          weui.topTips('请输入您的昵称')
          return
        }

        $.ajax({
          type: 'POST',
          url: 'https://wechat.horeax.net/2025/gsk_h5/?c=welcome&m=check_mudid',
          data: {
            mudid: mudid,
            nickname: nickname
          },
          beforeSend: function (XMLHttpRequest) {
            loading = weui.loading('认证中')
          },
          dataType: 'json',
          success: function (ress) {
            //发送失败
            if (!ress.status) {
              return weui.alert(ress.message)
            }

            weui.toast('认证成功', {
              duration: 1000,
              mask: true
            })
            is_signup = true
            hide_login_pop()
            //显示游戏规则
            show_rule()
          },
          error: function () {
            weui.alert('网络错误，请刷新页面重试')
          },
          complete: function (XMLHttpRequest, textStatus) {
            loading.hide()
          },
          async: true
        })
      }

      // 清除page1的动画类
      function clearPage1Animation() {
        $('.page1-slogon, .page1-img1, .page1-img2, .page1-img3').removeClass('page1-animate')
      }

      // 清除page2的动画类
      function clearPage2Animation() {
        $('.page2-img1, .page2-img2').removeClass('page2-animate')
      }

      // 清除page3的动画类
      function clearPage3Animation() {
        $('.page3-title, .page3-con .con-img').removeClass('page3-animate')
      }

      // 跳转到漫画列表
      function goto_part2() {
        //报名判断
        if (!is_signup) {
          show_login_pop()
          return
        }

        // 从后端获取 comics_list 数据
        $.ajax({
          url: 'https://wechat.horeax.net/2025/gsk_h5/index.php?c=welcome&m=get_comics_list',
          type: 'POST',
          dataType: 'json',
          beforeSend: function (XMLHttpRequest) {
            loading = weui.loading('加载中')
          },
          success: function (response) {
            if (response.status) {
              // 根据数据动态生成漫画列表
              generateComicsList(response.result)
            } else {
              weui.alert('获取漫画列表失败，请稍后再试')
            }
          },
          error: function () {
            weui.alert('网络错误，请刷新页面重试')
          },
          complete: function (XMLHttpRequest, textStatus) {
            loading.hide()
          },
          async: true
        })

        clearPage1Animation()
        $('#page1').hide()
        $('#page3').show()
      }

      // 根据漫画数据动态生成列表
      function generateComicsList(comicsData) {
        var html = ''

        for (var i = 0; i < comicsData.length; i++) {
          var comic = comicsData[i]

          // 判断奇偶行，决定使用哪种按钮样式
          var isOdd = (i + 1) % 2 === 1 // 第1,3,5...行为奇数行
          var btnType = isOdd ? '1' : '2'

          html += '<div class="con-img page3-animate" data-comics-id="' + comic.id + '">'
          html += '    <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/page3-img' + comic.id + '.png"/>'

          // 根据完成状态显示不同的按钮
          if (comic.is_completed) {
            // 已完成，显示 page3-over
            html += '    <div class="page3-btn" style="display: none;">'
            html += '        <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/page3-btn' + btnType + '.png"/>'
            html += '    </div>'
            html += '    <div class="page3-over">'
            html += '        <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/page3-btn' + btnType + '-2.png"/>'
            html += '    </div>'
          } else {
            // 未完成，显示 page3-btn
            html += '    <div class="page3-btn">'
            html += '        <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/page3-btn' + btnType + '.png"/>'
            html += '    </div>'
            html += '    <div class="page3-over" style="display: none;">'
            html += '        <img src="https://wechat.horeax.net/2025/gsk_h5/public/images/page3-btn' + btnType + '-2.png"/>'
            html += '    </div>'
          }

          html += '</div>'
        }

        // 更新页面内容
        $('.page3-con').html(html)
      }

      // 漫画列表返回首页
      function part2_goto_page1() {
        clearPage3Animation()
        $('#page3').hide()
        $('#page1').show()
        check_is_finished()
      }

      //跳转到排行榜
      function goto_rank() {
        //报名判断
        if (!is_signup) {
          show_login_pop()
          return
        }

        // 加载排行榜数据
        loadRankingData()
      }

      // 加载排行榜数据
      function loadRankingData() {
        $.ajax({
          url: 'https://wechat.horeax.net/2025/gsk_h5/index.php?c=welcome&m=get_ranking_data',
          type: 'POST',
          beforeSend: function (XMLHttpRequest) {
            loading = weui.loading('加载中')
          },
          success: function (response) {
            if (response.status) {
              // 更新排行榜列表
              updateRankingList(response.ranking_list)

              // 更新我的积分进度
              updateUserProgress(response.current_user, response.max_score)

              // 显示排行榜页面
              clearPage1Animation()
              $('#page1').hide()
              $('#page5').show()
            } else {
              alert(response.message || '获取排行榜数据失败')
            }
          },
          error: function () {
            alert('网络错误，请稍后重试')
          },
          complete: function (XMLHttpRequest, textStatus) {
            loading.hide()
          }
        })
      }

      // 更新排行榜列表显示
      function updateRankingList(rankingList) {
        var html = ''

        for (var i = 0; i < rankingList.length; i++) {
          var user = rankingList[i]
          var rank = i + 1

          html += '<div class="bd-row">'
          html += '    <div class="row-num">'

          if (rank <= 3) {
            html += '        <div class="icon-num num' + rank + '"></div>'
          } else {
            html += '        <div class="icon-num">' + rank + '</div>'
          }

          html += '    </div>'
          html += '    <div class="row-name">' + user.nickname + '</div>'
          html += '    <div class="row-score">' + user.score + '分</div>'
          html += '</div>'
        }

        // 如果不足10个，填充空行
        for (var j = rankingList.length; j < 10; j++) {
          html += '<div class="bd-row">'
          html += '    <div class="row-num"><div class="icon-num">' + (j + 1) + '</div></div>'
          html += '    <div class="row-name">-</div>'
          html += '    <div class="row-score">-</div>'
          html += '</div>'
        }

        $('.table-bd').html(html)
      }

      // 更新我的积分进度显示
      function updateUserProgress(currentUser, maxScore) {
        var score = currentUser.score || 0
        var percentage = Math.round((score / maxScore) * 100)

        // 更新进度条
        $('.bar-per').css('width', percentage + '%')

        // 更新分数显示
        $('.step-right').text(score + '/' + maxScore + '分')
      }

      //排行榜返回首页
      function rank_goto_page1() {
        $('#page5').hide()
        $('#page1').show()
        check_is_finished()
      }

      // page4 select-item点击填充功能
      var currentFillIndex = 0 // 从第一个p-txt开始填充
      var true_arr = [] // 正确的顺序，从后台动态获取
      var currentComicsId = 0 // 当前漫画ID
      var pop3_closed = false // 标记用户是否已经关闭过pop3弹窗

      $(function () {
        check_is_finished()
        //TEST
        // goto_part2();
        // $("#page1").hide();
        // $("#page4").show();

        //漫画列表点击
        $(document).on('click', '.page3-con .con-img', function () {
          var index = $(this).index() + 1
          var comicsId = $(this).data('comics-id')
          var title = $(this).data('title')

          console.log('点击漫画:', index, comicsId, title)

          // 保存当前漫画ID
          currentComicsId = comicsId

          // 获取漫画详情
          loadComicsDetail(comicsId)
        })

        $(document).on('click', '.card-select .select-item', function () {
          // 如果已经有on类，则不处理
          if ($(this).hasClass('on')) {
            return
          }

          // 获取当前点击item的文本内容
          var itemText = $(this).text().trim()

          // 获取所有p-txt元素
          var $pTxtElements = $('.page4-con .p-txt')

          // 检查是否还有空的p-txt可以填充
          if (currentFillIndex < $pTxtElements.length) {
            // 填充下一个空的p-txt
            $pTxtElements.eq(currentFillIndex).text(itemText)

            // 给当前点击的item添加on类
            $(this).addClass('on')

            // 增加填充索引
            currentFillIndex++

            // 检查是否所有p-txt都已填写
            if (currentFillIndex >= $pTxtElements.length) {
              // 隐藏no-submit，显示yes-submit
              $('#no-submit').hide()
              $('#yes-submit').show()
            }
          }
        })
      })

      // submit_answer函数：收集p-txt内容并与正确答案比较
      function submit_answer() {
        // 获取所有p-txt元素
        var $pTxtElements = $('.page4-con .p-txt')

        // 收集当前填写的答案
        var userAnswers = []
        $pTxtElements.each(function () {
          userAnswers.push($(this).text().trim())
        })

        // 先清除之前的样式
        $pTxtElements.removeClass('success fail')

        // 与正确答案比较，并添加对应的样式
        var isCorrect = true
        var correctCount = 0
        if (userAnswers.length === true_arr.length) {
          for (var i = 0; i < userAnswers.length; i++) {
            if (userAnswers[i] === true_arr[i]) {
              // 答案正确，添加success样式
              $pTxtElements.eq(i).addClass('success')
              correctCount++
            } else {
              // 答案错误，添加fail样式
              $pTxtElements.eq(i).addClass('fail')
              isCorrect = false
            }
          }
        } else {
          isCorrect = false
          // 如果长度不匹配，所有都标记为错误
          $pTxtElements.addClass('fail')
        }

        //不管正确与否，都向后台发送一条记录，用户记录日志
        $.ajax({
          url: 'https://wechat.horeax.net/2025/gsk_h5/index.php?c=welcome&m=save_comics_log_data',
          type: 'POST',
          data: {
            comics_id: currentComicsId,
            is_correct: isCorrect ? 1 : 0,
            user_answers: JSON.stringify(userAnswers)
          }
        })

        // 显示结果
        if (isCorrect) {
          // 向后台发送记录请求
          $.ajax({
            url: 'https://wechat.horeax.net/2025/gsk_h5/index.php?c=welcome&m=save_comics_log',
            type: 'POST',
            data: {
              comics_id: currentComicsId,
              user_answers: JSON.stringify(userAnswers),
              is_correct: 1
            },
            success: function (response) {
              if (!response.status) {
                return weui.alert(response.message)
              }

              // 显示正确弹窗
              $('#pop-true').fadeIn()
            },
            error: function () {
              console.log('记录保存失败')
            }
          })
        } else {
          $('#pop-false').fadeIn()
        }
      }

      // 重置填空游戏状态
      function resetGameState() {
        $('#pop-false').fadeOut()

        // 清空所有p-txt元素的内容
        $('.page4-con .p-txt').text('\u00a0') // 使用&nbsp;保持原样

        // 清除success和fail样式
        $('.page4-con .p-txt').removeClass('success fail')

        // 移除所有选项的on类
        $('.card-select .select-item').removeClass('on')

        // 重置填充索引
        currentFillIndex = 0

        // 隐藏yes-submit按钮，显示no-submit按钮
        $('#yes-submit').hide()
        $('#no-submit').show()
      }

      // 删除填空内容的函数
      function delete_answer() {
        // 如果没有填写任何内容，直接返回
        if (currentFillIndex === 0) {
          return
        }

        // 获取所有p-txt元素
        var $pTxtElements = $('.page4-con .p-txt')

        // 删除最后一个填写的内容
        currentFillIndex--
        var lastFilledElement = $pTxtElements.eq(currentFillIndex)
        var lastFilledText = lastFilledElement.text().trim()

        // 清空最后填写的p-txt内容
        lastFilledElement.text('\u00a0') // 使用&nbsp;保持原样

        // 清除success和fail样式
        lastFilledElement.removeClass('success fail')

        // 找到对应的选项并移除on类
        $('.card-select .select-item').each(function () {
          if ($(this).text().trim() === lastFilledText && $(this).hasClass('on')) {
            $(this).removeClass('on')
            return false // 找到后退出循环
          }
        })

        // 如果删除后没有填写完所有内容，隐藏yes-submit，显示no-submit
        if (currentFillIndex < $pTxtElements.length) {
          $('#yes-submit').hide()
          $('#no-submit').show()
        }
      }

      //答对返回列表页，要重新获取数据
      function true_back() {
        $('#pop-true').hide()
        $('#page4').hide()
        goto_part2()
        // 由于goto_part2可能不会返回首页，这里也检查一下
        setTimeout(function () {
          check_is_finished()
        }, 100)
      }

      // 加载漫画详情
      function loadComicsDetail(comicsId) {
        $.ajax({
          url: 'https://wechat.horeax.net/2025/gsk_h5/index.php?c=welcome&m=get_comics_detail',
          type: 'POST',
          data: {
            comics_id: comicsId
          },
          success: function (response) {
            if (response.status) {
              var comicsInfo = response.comics_info

              // 更新全局变量
              true_arr = comicsInfo.true_arr

              //漫画图
              $('#page4-img1').attr('src', 'https://wechat.horeax.net/2025/gsk_h5/public/images/comics_' + comicsId + '.png')

              // 渲染漫画内容
              $('.page4-con').html(comicsInfo.contents)

              // 渲染选项
              var html = ''
              if (comicsInfo.select_options && comicsInfo.select_options.length > 0) {
                for (var i = 0; i < comicsInfo.select_options.length; i++) {
                  html += '<div class="select-item">' + comicsInfo.select_options[i] + '</div>'
                }
              }
              $('.card-select').html(html)

              // 重置游戏状态（不关闭弹窗）
              resetGameState()

              // 显示page4
              $('#page3').hide()
              $('#page4').show()
              clearPage3Animation()
            } else {
              alert(response.message || '获取漫画详情失败')
            }
          },
          error: function () {
            alert('网络错误，请稍后重试')
          }
        })
      }

      //点击漫画看大图
      function show_img() {
        wx.previewImage({
          current: 'https://wechat.horeax.net/2025/gsk_h5/public/images/comics_' + currentComicsId + '.png', // 当前显示图片的http链接
          urls: ['https://wechat.horeax.net/2025/gsk_h5/public/images/comics_' + currentComicsId + '.png'] // 需要预览的图片http链接列表
        })
      }

      //检测是否完成了所有项目
      function check_is_finished() {
        // 如果用户已经关闭过pop3弹窗，就不再检查
        if (pop3_closed) {
          return
        }

        //后台查询用户分数
        $.ajax({
          type: 'POST',
          url: 'https://wechat.horeax.net/2025/gsk_h5/index.php?c=welcome&m=check_is_finished',
          dataType: 'json',
          success: function (data) {
            if (data.status) {
              // 积分达到120分，显示满分弹窗
              $('#pop3').fadeIn()
            }
          },
          error: function () {
            console.log('网络错误，查询积分失败')
          }
        })
      }

      // 隐藏pop3弹窗并设置标志，后续不再弹出
      function hide_pop3() {
        $('#pop3').fadeOut()
        pop3_closed = true // 设置标志，表示用户已经关闭过弹窗
      }
    </script>
    <script>
      function BGMAutoPlayMgr /* solveAndroidBGMAutoplay */(url) {
        //return;
        this.audioContext = new (window.AudioContext || window.webkitAudioContext || window.mozAudioContext)()
        this.sourceNode = null
        this.buffer = null
        this.isPlayingBGM = false
        this.toggleBGM = function () {
          if (typeof this.sourceNode == 'object') {
            if (this.isPlayingBGM) {
              this.sourceNode.stop()
              this.isPlayingBGM = false
              $('#sound_image').removeClass('openmusic')
            } else {
              this._playSourceNode()
              $('#sound_image').addClass('openmusic')
            }
          }
        }
        this._playSourceNode = function () {
          const audioContext = this.audioContext
          audioContext.resume()
          const _sourceNode = audioContext.createBufferSource()
          _sourceNode.buffer = this.buffer
          _sourceNode.loop = true
          _sourceNode.connect(audioContext.destination)
          _sourceNode.start(0)
          this.sourceNode = _sourceNode
          this.isPlayingBGM = true
        }
        let loadAndAutoPlay = (audioUrl) => {
          //alert('play');
          const audioContext = this.audioContext
          const xhr = new XMLHttpRequest()
          xhr.open('GET', audioUrl, true)
          xhr.responseType = 'arraybuffer'
          xhr.onreadystatechange = () => {
            if (xhr.status < 400 && xhr.status >= 200 && xhr.readyState === 4) {
              audioContext.decodeAudioData(xhr.response, (buffer) => {
                this.buffer = buffer
                WeixinJSBridge.invoke('getNetworkType', {}, () => this._playSourceNode())
              })
            }
          }
          xhr.send()
        }
        loadAndAutoPlay(url)
        loadAndAutoPlay = null
      }

      //切换音乐播放/暂停
      function toggleBGM() {
        if (window.bgms) {
          window.bgms.toggleBGM()
        }
      }
    </script>
    <script>
      !(function (p) {
        'use strict'
        !(function (t) {
          var s = window,
            e = document,
            i = p,
            c = ''.concat('https:' === e.location.protocol ? 'https://' : 'http://', 'sdk.51.la/js-sdk-pro.min.js'),
            n = e.createElement('script'),
            r = e.getElementsByTagName('script')[0]
          ;(n.type = 'text/javascript'), n.setAttribute('charset', 'UTF-8'), (n.async = !0), (n.src = c), (n.id = 'LA_COLLECT'), (i.d = n)
          var o = function () {
            s.LA.ids.push(i)
          }
          s.LA ? s.LA.ids && o() : ((s.LA = p), (s.LA.ids = []), o()), r.parentNode.insertBefore(n, r)
        })()
      })({ id: '3NLqmejnIYvsi0r1', ck: '3NLqmejnIYvsi0r1' })
    </script>
  </body>
</html>
